<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="BootStrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="layui-v2.5.7/layui/css/layui.css"/>
    <script src="layui-v2.5.7/layui/layui.js"></script>
    <script src="javascript/jquery.js"></script>
    <script src="BootStrap/js/bootstrap.min.js"></script>
</head>
<body>
<!--
    @Author: LuXi
    订单列表页
-->
<section class="page-hd">
    <header>
        <h2 class="title"><font color="#d3d3d3">订单管理</font>/<font>订单</font></h2>
    </header>
    <hr>
</section>

<form id="search_order" class="layui-form layui-form-pane">
    <input type="hidden" name="flag" />
    <div class="layui-form-item">
        <label class="layui-form-label">
            <i class="layui-icon layui-icon-search" style="font-size: 30px;color:lightgray;"></i>
        </label>
        <div class="layui-input-inline">
            <input type="text" name="userordernum" placeholder="请输入订单编号" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-input-inline">
            <button onclick="search_search()" type="button" class="layui-btn layui-btn-normal">搜索</button>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">所属医院</label>
            <div class="layui-input-inline">
                <select name="hospital" id="select_hospital" lay-search>
                    <option value="0" selected>--全部医院--</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">所属科室</label>
            <div class="layui-input-inline">
                <select name="department" id="select_department" lay-search>
                    <option value="0" selected>--全部科室--</option>
                </select>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">订单状态</label>
        <div class="layui-input-inline">
            <select name="userorderstatus" lay-search>
                <option value="0" selected>--全部状态--</option>
                <option value="1" >待支付</option>
                <option value="2" >已支付</option>
                <option value="3" >进行中</option>
                <option value="4" >已完成</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">下单时间</label>
            <div class="layui-input-inline" style="width: 200px;">
                <input type="text" name="timeStart" placeholder="选择开始时间" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid">&nbsp;至&nbsp;</div>
            <div class="layui-input-inline" style="width: 200px;">
                <input type="text" name="timeEnd" placeholder="选择结束时间" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <button type="button" onclick="search_other()" class="layui-btn layui-btn-normal ">确认</button>
                <button type="button" onclick="order_reset()" class="layui-btn layui-btn-primary ">清除</button>
            </div>
        </div>
    </div>
    <!--当前页-->
    <input type="hidden" name="pageNum" />
</form >

<form class="layui-form layui-form-pane"  >
    <div class="layui-form-item">
        <label class="layui-form-label">
            <i class="layui-icon layui-icon-form" ></i>
            总订单数</label>
        <div class="layui-input-inline">
            <input style="border: 0px;font-size: 28px;font-weight: bold;"  type="text" name="orderCount" autocomplete="off" class="layui-input" readonly="readonly" />
        </div>
    </div>
</form>

<table class="layui-table" style="text-align: center;" lay-skin="line">
    <thead>
        <tr>
            <th style="text-align: center">订单号</th>
            <th style="text-align: center">所属医院</th>
            <th style="text-align: center">所属科室</th>
            <th style="text-align: center">床位ID</th>
            <th style="text-align: center">实际支付</th>
            <th style="text-align: center">手机号</th>
            <th style="text-align: center">订单状态</th>
            <th style="text-align: center">下单时间</th>
            <th style="text-align: center">操作</th>
        </tr>
    </thead>
    <tbody id="tbody">

    </tbody>
</table>

<div class="container">
    <div class="row" style="margin-right: 40%;">
        <ul class="pagination pull-right" id="pages">
        </ul>
    </div>
</div>

<!-- 删除模态框 -->
<div class="modal fade" id="modal_delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">订单删除</h4>
            </div>
            <div class="modal-body">
                <h2>您确认删除该订单吗？删除后有关订单息会全部删除哦...</h2>
            </div>
            <div class="modal-footer">
                <button id="order_delete" type="button" class="btn btn-default">删除</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!--加载layui-->
<script type="text/javascript">
    layui.use('form', function () {
        var form = layui.form;
        show(form);
    });
    function show(form) {
        $.ajax({
           url:"/order/info",
           type:"post",
           data:$("#search_order").serialize(),
           success:function (data) {
               if(data.result){
                   var list = "";
                   var status = "";
                   //表格
                   $.each(data.list,function (index,order) {
                       list +="<tr>";
                       list +="<td>"+order.userordernum+"</td>";
                       list +="<td>"+order.hospital+"</td>";
                       list +="<td>"+order.department+"</td>";
                       list +="<td>"+order.bedMessageid+"</td>";
                       list +="<td>"+order.userorderrent+"</td>";
                       list +="<td>"+order.phone+"</td>";
                       switch (order.userorderstatus) {
                           case 1:
                               status = "<font color='#f08080'>待支付</font>";
                               break;
                           case 2:
                               status = "已支付";
                               break;
                           case 3:
                               status = "<font color='#20b2aa'>进行中</font>";
                               break;
                           case 4:
                               status = "已完成";
                               break;
                       }
                       list +="<td>"+status+"</td>";
                       list +="<td>"+order.userorderstarttime+"</td>";
                       list +="<td>" +
                           "<a href='OrderXiangQing.html' onclick='XiangQing("+order.userorderid+")'><span style='color: blue;font-weight: bold'>详情</span></a>" +
                           "&nbsp;&nbsp;<span style='color: cornflowerblue;font-weight: bold'>|</span>&nbsp;&nbsp;" +
                           "<a href='javascript:deleteOrder("+order.userorderid+")'><span style='color: blue;font-weight: bold'>删除</span></a>" +
                           "</td>";
                       list +="</tr>";
                   });

                   //下拉列表
                   var  option_1 = "";
                   $.each(data.hospitals,function (index,hospital) {
                       option_1 += "<option value='"+hospital.hospitalinfoid+"' >"+hospital.hospitalinfoname+"</option>";
                   });
                   var  option_2 = "";
                   $.each(data.departments,function (index,department) {
                       option_2 += "<option value='"+department.departmentid+"' >"+department.departmentname+"</option>";
                   });

                   // $("#search_order")[0].reset();
                   $("#select_hospital").append(option_1);
                   $("#select_department").append(option_2);

                   //去重
                   $("select option").each(function() {
                       text = $(this).text();
                       if($("select option:contains("+text+")").length > 1)
                           $("select option:contains("+text+"):gt(0)").remove();
                   });

                   $("#tbody").html(list);
                   pageLoad(data.pageInfo);
                   pageClick(data.pageInfo.pages);
                   $(":input[name=orderCount]").val(data.size);
                   //重新渲染select
                   form.render('select');
               }else{
                   // alert("未找到 ！")
                   layui.use('layer', function(){
                       var layer = layui.layer;
                       layer.msg('未找到 ！', {icon: 5});
                   });
               }
           }
        });
    }

    //分页
    function pageLoad(data) {
        var str = "<li><a href='"+(data.pageNum - 1)+"'>上一页</a></li>";
        // for (var i = 1; i <= data.pages; i++) {
        //     if(i == data.pageNum){
        //         str += "<li class='active'><a href='"+i+"'>"+i+"</a></li>";
        //     }else{
        //         str += "<li><a href='"+i+"'>"+i+"</a></li>";
        //     }
        // }
        str += "<li class='active'><a>"+data.pageNum+"</a></li>";
        str += "<li><a href='"+(data.pageNum + 1)+"'>下一页</a></li>";
        str += "<li><a>共"+data.pages+"页</a></li>";
        $("#pages").html(str);
    }

    function pageClick(pages) {
        $("#pages a").click(function () {
            var cutPage = $(this).attr("href");
            if(cutPage > pages){
                cutPage = pages;
            }
            if(cutPage < 1){
                cutPage = 1;
            }
            $(":hidden[name=pageNum]").val(cutPage);
            show();
            return false;
        });
    }

    //删除
    function deleteOrder(orderid) {
        $("#modal_delete").modal("show");
        $("#order_delete").click(function () {
            $.ajax({
                url:"/order/delete",
                data:{"userorderid":orderid},
                type: "post",
                success:function (data) {
                    if(data.result){
                        $("#modal_delete").modal("hide");
                        show();
                    }else{
                        layui.use('layer', function(){
                            var layer = layui.layer;
                            layer.msg('删除失败 ！', {icon: 5});
                        });
                    }
                }
            });
        });
    }

    //清除表单
    function order_reset() {
        $("#search_order")[0].reset();
        $(":input[name=flag]").val("");
        show();
    }

    //查询
    function search_other() {
        $(":input[name=flag]").val(false);
        show();
    }

    //编号查询
    function search_search() {
        $(":input[name=flag]").val(true);
        show();
    }

    //详情
    function XiangQing(item) {
        window.localStorage.setItem("userorderid",item);
    }
</script>
</body>
</html>